@import 'assets/stylesheets/gutenberg-base-styles';
@import '../../mixins.scss';
@import '../../variables.scss';

@keyframes domain-picker-button-slide-in {
	from {
		max-width: 0;
		opacity: 0;
	}

	80% {
		max-width: 0;
		opacity: 0;
	}

	to {
		max-width: 500px;
		opacity: 1;
	}
}

.domain-picker-button {
	opacity: 0;
	transition: opacity $acquire-intent-transition-duration $acquire-intent-transition-algorithm;

	&--has-content {
		opacity: 1;
	}

	&--has-first-content {
		animation-duration: 4s;
		animation-name: domain-picker-button-slide-in;
		max-width: 1500px;
		@include reduce-motion( 'animation' );
	}

	.components-button {
		@include onboarding-medium-text;
		background: var( --studio-blue-0 );
		border-radius: $radius-block-ui;
		color: var( --studio-blue-40 );
		max-width: 100%;
		height: auto; // prevent clipping when there are 2 lines
		padding: 5px 12px;
		text-align: left;

		&:focus,
		&:hover[type] {
			box-shadow: 0 0 0 1px var( --studio-blue-40 );
			outline: 0;
		}

		&:not( [aria-disabled='true'] ):active {
			box-shadow: 0 0 0 1px var( --studio-blue-60 );
			color: var( --studio-blue-60 );
		}
	}

	&__label {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	svg {
		margin-left: 0.2em;
		transition: transform 100ms ease-in-out;
	}
}

// Remove focus styling from clicking a button
// Keep keyboard-focused focus style
html:not( .accessible-focus ) .domain-picker-button:focus:not( :disabled ):not( :hover ) {
	box-shadow: none;
}
